<template>
  <base-table
    ref="tableRef"
    :url="url"
    :table-field-list="tableFieldList"
    :submit-form="submitForm"
    submit-form-title="页面访问api信息"
    :fixed-func-btn="fixedFuncBtn"
    @data-format="dataFormat"
    @set-form-init-value="setFormInitValue"
    @submit-valid="submitValid"
  >
    <template #submitForm>
      <el-form
        :model="submitForm"
        :rules="formRules"
        :label-width="100"
        ref="submitFormRef"
      >
        <el-form-item label="父id：" prop="parentId">
          <el-select @click="getMenuList()">
            <template v-for="(item, key) in menuList" :key="key">
              <el-option :value="item.id"></el-option>
            </template>
          </el-select>
          <el-input v-model="submitForm.parentId"></el-input>
        </el-form-item>
        <el-form-item label="菜单项：" prop="menuOrders">
          <el-input v-model="submitForm.menuOrders"></el-input>
        </el-form-item>
        <el-form-item label="路径：" prop="path">
          <el-input v-model="submitForm.path"></el-input>
        </el-form-item>
        <el-form-item label="标题：" prop="title">
          <el-input v-model="submitForm.title"></el-input>
        </el-form-item>
        <el-form-item label="图标：" prop="icon">
          <el-input v-model="submitForm.icon"></el-input>
        </el-form-item>
      </el-form>
    </template>
  </base-table>
  <menu-permission-dialog></menu-permission-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";

import BaseTable from "@/components/table/basic/BaseTable.vue";
import { FixedFuncBtn } from "@/models/TableSetting";
import { Menu } from "@/models/developer/Menu";
import MenuPermissionDialog from "@/views/developer/MenuBackendApiRelation/MenuPermissionDialog.vue";
import { menuPermissionDialogEvent } from "@/views/developer/MenuBackendApiRelation/MenuPermissionDialogEvent";
import { menuBackendApiRelationSubmitForm } from "@/views/developer/MenuBackendApiRelation/MenuBackendApiRelationSubmitForm";

/**
 * 表单基础方法的申明.
 */
const {
  submitFormRef,
  submitForm,
  url,
  tableFieldList,
  formRules,
  dataFormat,
  setFormInitValue,
  submitValid,
} = menuBackendApiRelationSubmitForm();

/**
 * 表单扩展方法的申明
 */
const fixedFuncBtn = ref({
  width: 180,
  button: [
    {
      name: "调用的api",
      icon: "view",
      type: "text",
      method: (row: Menu) => {
        console.log(row);
        changeSetMenuPermissionDialogVisible();
      },
    },
  ],
} as FixedFuncBtn);

const { changeSetMenuPermissionDialogVisible } = menuPermissionDialogEvent();
const tableRef = ref();
const menuList = ref([] as Menu[]);
const getMenuList = () => {
  console.log(tableRef.value);
  // menuList.value = tableRef.value.tableData() as Menu[];
};
getMenuList();
</script>

<style scoped></style>
